<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1 *ngIf="forum">{{ forum.name }}</h1>
            <h1 *ngIf="!forum">{{ 'addon.block_searchforums.pluginname' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <div>
        <ion-card class="core-danger-card" *ngIf="searchBanner">
            <ion-item class="ion-text-wrap">
                <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                <ion-label>
                    <core-format-text [text]="searchBanner" />
                </ion-label>
            </ion-item>
        </ion-card>

        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch()" [placeholder]="'core.search' | translate"
            [searchLabel]="'core.search' | translate" [autoFocus]="true" [searchArea]="searchAreaId" />

        <ion-list *ngIf="resultsSource.isLoaded()">
            <core-search-global-search-result *ngFor="let result of resultsSource.getItems()" [result]="result" [showCourse]="false"
                (onClick)="visitResult(result)" />
        </ion-list>

        <core-infinite-loading [enabled]="resultsSource.isLoaded() && !resultsSource.isCompleted()" (action)="loadMoreResults($event)"
            [error]="loadMoreError" />

        <core-empty-box *ngIf="resultsSource.isEmpty()" icon="fas-magnifying-glass" [dimmed]="!resultsSource.isLoaded()" role="alert">
            <p *ngIf="!resultsSource.isLoaded()">{{ 'core.search.empty' | translate }}</p>
            <ng-container *ngIf="resultsSource.isLoaded()">
                <p><strong>{{ 'core.search.noresults' | translate: { $a: resultsSource.getQuery() } }}</strong></p>
                <p><small>{{ 'core.search.noresultshelp' | translate }}</small></p>
            </ng-container>
        </core-empty-box>
    </div>
</ion-content>
